   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <!-- 初始化-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
    crossorigin="anonymous" />

    <title>排列</title>
   </head>
   <body>
    <button id="dianji" class="fangda">点击放大</button>
    <div id="boxes" class="boxes big"></div>

   </body>
   </html>
   <style>

* {

  box-sizing: border-box;
}

body {
    /* 背景色 */
  background-color:pink;
  /* 字号 */
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}
.fangda{
    color: blue;
    background-color: pink;
    border:1px solid black ;
}

    
   </style>